<template>
	<view class="home">

		<!--头像区域-->
		<view>
			<image src="/pagesA/static/img/c7.png" mode="" style="width: 100%;height: 100px;"></image>
		</view>

		<!--资料详情-->
		<view class="zl_down">

			<view class="zl_down_t">
				<view style="background-color: #F14399;width: 3px;margin-left: 5px;"></view>
				<view class="zl_c_d" style="margin-left: 10px;"><text
						style="font-size: 18px;color: #4D4D4D;font-weight: bold;">购买VIP会员</text></view>
			</view>

			<hr style="border:1px solid #DADCE0;width: 100%;margin: 10px auto;">

			<view class="" v-for="item in swipers" :key="item.id">

				<view class="zl_c">
					<view class="iconfont icon-renzheng-"
						style="margin-top: 8px; margin-left: 3px;font-size:20px;color: #F14399;"></view>
					<view class="zl_c_d" style="width: 20%;">
						<text style="font-size: 16px;color: #4D4D4D;">{{ item.title }}</text>
					</view>

					<view class="" style="width: 40%;font-size: 12px;color: #D8D8D8;margin-top: 10px;">
						<text>{{ item.notes }}</text>
					</view>

					<view class="" style="width: 20%;margin-top: 10px;">
						<text style="color:#F14399 ;">￥{{ item.op }}元</text>
					</view>

					<view class="zl_c_e" style="width: 10%;">
						<radio-group @change="chan">
							<radio :value="String(item.id)" :checked="item.id == activeRadio" />
						</radio-group>
					</view>

				</view>

				<view class="">
					<hr style="border:1px solid #DADCE0;width: 90%;margin: 10px auto;">
				</view>

			</view>

		</view>


		<!--资料详情-->
		<!-- <view class="zl_down">

			<view class="zl_down_t">
				<view style="background-color: #F14399;width: 3px;margin-left: 5px;"></view>
				<view class="zl_c_d" style="margin-left: 10px;"><text
						style="font-size: 18px;color: #4D4D4D;font-weight: bold;"><text>有效期：{{ start_time }} 至
							{{ end_time }}</text></text></view>
			</view>
		</view> -->

		<view class="" @click="weixin()" style="margin: 20px 20px;"><button type="default" style="background-color: #F14399;">微信支付</button></view>

		<!--尊享特权-->
		<view class="zl_down">

			<view class="zl_down_t">
				<view style="background-color: #F14399;width: 3px;margin-left: 5px;"></view>
				<view class="zl_c_d" style="margin-left: 10px;"><text
						style="font-size: 18px;color: #4D4D4D;font-weight: bold;">VIP尊享特权</text></view>
			</view>

			<hr style="border:1px solid #DADCE0;width: 100%;margin: 10px auto;">
			<view class="zl_c">
				<view class="iconfont icon-renzheng-" style="margin-left: 3px;font-size:60px;color: #F14399;"></view>
				<view class="zl_c_e" style="width:80%">
					<view class="zl_c_d"><text style="font-size: 16px;color: #4D4D4D;">查看相亲信息</text></view>
					<view class="zl_c_d"><text style="font-size: 10px;color: #D0D0D0;">免费查看会员相亲信息</text></view>
				</view>
			</view>

			<hr style="border:1px solid #DADCE0;width: 100%;margin: 10px auto;">
			<view class="zl_c">
				<view class="iconfont icon-renzheng-" style="margin-left: 3px;font-size:60px;color: #F14399;"></view>


				<view class="zl_c_e" style="width:80%">
					<view class="zl_c_d"><text style="font-size: 16px;color: #4D4D4D;">会员身份标识</text></view>
					<view class="zl_c_d"><text style="font-size: 10px;color: #D0D0D0;">身份加V标识，吸引更多关注</text></view>
				</view>
			</view>

			<hr style="border:1px solid #DADCE0;width: 100%;margin: 10px auto;">
			<view class="zl_c">
				<view class="iconfont icon-renzheng-"
					style=" margin-left: 3px;font-size:60px;color: #F14399;margin-top: 10px;"></view>
				<view class="zl_c_e" style="width:80%">
					<view class="zl_c_d"><text style="font-size: 16px;color: #4D4D4D;">红娘牵线服务</text></view>
					<view class="zl_c_d"><text style="font-size: 10px;color: #D0D0D0;">专业红娘牵线服务</text></view>
				</view>
			</view>

		</view>


		<!--会员套餐详情-->
		<view class="zl_down">

			<view class="zl_down_t">
				<view style="background-color: #F14399;width: 3px;margin-left: 5px;"></view>
				<view class="zl_c_d" style="margin-left: 10px;"><text
						style="font-size: 18px;color: #4D4D4D;font-weight: bold;">会员套餐详情</text></view>
			</view>


			<view style="text-align: center;border-radius: 8px;margin-top: 10px;">
				<image src="/h5/static/img/c8.jpg" mode="" style="width: 80%;height: 500px;"></image>
			</view>

		</view>

		<!--安全征婚提示-->
		<view class="zl_down">

			<view class="zl_down_t">
				<view style="background-color: #F14399;width: 3px;margin-left: 5px;"></view>
				<view class="zl_c_d" style="margin-left: 10px;"><text
						style="font-size: 18px;color: #4D4D4D;font-weight: bold;">安全征婚提示</text></view>
			</view>

			<view style="border-radius: 8px;padding:20px 20px;">
				<view class=""><text style="font-size: 12px;color: #B9B9B9;">为了您 的征婚安全，请您 做到：</text></view>
				<view class=""><text style="font-size: 12px;color: #B9B9B9;">1、不借钱给任何会员，也不与对方发生任何形式的经济关系。</text></view>
				<view class=""><text
						style="font-size: 12px;color: #B9B9B9;padding-bottom: 80px;">2、拒绝一夜情自尊自爱，理性征婚，不轻易发生亲密关系。</text>
				</view>

			</view>

		</view>

	</view>
</template>


<script>
export default {
	data() {
		return {
			seen: false,
			start_time: "0000-00-00",
			end_time: "0000-00-00",
			products: {},
			swipers: [],
			activeRadio: 0, //存的是选中的value值
		}
	},
	onLoad(options) {

		this.getinfo(); //检查缓存

		this.vip_setmeal()

	},

	methods: {
		//退出
		async chan(e) {
			this.activeRadio = e.detail.value;
			var mid = e.detail.value;

			// const res = await this.$myRuquest({
			// 	url: '/index/dsnv.activities/get_menber_time?mid=' + mid
			// });

			// if (res.data.code == 200) {

			// 	// 获取当前日期
			// 	let currentDate = new Date();

			// 	// 将当前日期格式化为 yyyy-MM-dd
			// 	let start_date = currentDate.toISOString().split('T')[0];

			// 	// 计算结束日期
			// 	currentDate.setDate(currentDate.getDate() + parseInt(res.data.day)); // 增加天数
			// 	let end_date = currentDate.toISOString().split('T')[0];

			// 	// 更新视图数据
			// 	this.start_time = start_date;
			// 	this.end_time = end_date;
			// }
		},

		weixin() {
			//获取当前会员套餐ID
			var mid = this.activeRadio;
			if (mid == 0) {
				uni.showToast({
					title: '请先选择套餐',
					duration: 2000,
					icon: 'none'
				})

			} else {
				// window.location.href = "http://ds.kzjpht.com/index/Jsapi/ds_menber?mid=" + mid + "&uid=" +this.id
				this.fuyou_zf();
			}
		},

		async fuyou_zf() {

			var launch = uni.getStorageSync('my_info');

			const res = await this.$myRuquest({ 
				url: '/index/dsnv.unifiedorder/preCreate?uid=' + launch.id + "&vid=" + this.activeRadio
			})

			if (res.data.code === 200 && res.data.response['result_msg'] === "SUCCESS") {
				const qrCodeUrl = res.data.response['qr_code'];
				// 导航到 webview 页面

				// 直接使用支付URL跳转，而不是通过WebView
				window.location.href = qrCodeUrl;
				// uni.navigateTo({
				// 	url: `/pages/webview/webview?url=${encodeURIComponent(qrCodeUrl)}` // https://ccloud.fuioupay.com/decca/native?token=20250429161651415005
				// });
			}

		},

		async vip_setmeal() {
			const res = await this.$myRuquest({
				url: '/index/dsnv.activities/setmeal'
			})
			if (res.data.code == 200) {
				this.swipers = res.data.date
			}
		},

		//获取个人数据
		checkGuide() {

			// 思路： 检测是否有启动缓存，如果没有，就是第一次启动，第一次启动就去 启动介绍页面
			const launchFlag = uni.getStorageSync('my_info');

			if (!launchFlag.id || 0 === launchFlag.id.length) {
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/login'
					});
				}, 400)
				uni.showToast({
					title: '请先登录',
					duration: 2000,
					icon: 'none'
				})
				return false;
			}
		},
		//登录
		denglu() {
			//判断是不否是微信浏览器登录
			let status = navigator.userAgent.toLowerCase();
			if (status.match(/MicroMessenger/i) == "micromessenger") {
				window.location.href = "http://ds.kzjpht.com/index/Jsapi/index";
			} else {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			}
		},
		//专属海报
		zl_hb() {
			this.checkGuide('/pages/my/tools/certification'); //检查是否登录
		},
		//查看是否有缓存
		async getinfo() {
			var launch = uni.getStorageSync('my_info');

			const res = await this.$myRuquest({
				url: '/index/dsnv.activities/myinfo2',
				data: {
					"id": launch.id,
				},
			})

			if (res.data.code == 200) {
				this.products = res.data.data;
				this.type = res.data.data.type;
				this.id = res.data.data.id;
			}
		},
	}
}
</script>

<style lang="scss">
.home {
	height: 850px;
	background-color: #F6F6F6;

	//头像
	.header {
		background-color: #fff;
		margin: 0 10px;
		display: flex;
		height: 100px;
		margin-bottom: 10px;
		border-radius: 10px;

		.header_left {
			image {
				margin-left: 10px;
				margin-top: 10px;
				width: 80px;
				height: 80px;
				border-radius: 50%;
			}
		}

		.header_right {
			margin-left: 5%;
			margin-top: 20px;
		}

		.header_rt {
			margin-left: 5%;
			margin-top: 45px;
		}


	}

	.middle {
		background-color: #fff;
		margin: 0 10px;
		display: flex;
		height: 90px;
		border-radius: 10px;
		text-align: center;

		.middle_c {
			margin-top: 10px;
			width: 33%;
		}

	}

	.zl_down {
		padding-bottom: 20px;
		background-color: #fff;
		margin: 20px 20px;
		border-radius: 10px;

		.zl_down_t {
			display: flex;
			padding: 10px 10px;
		}

		.zl_c {
			display: flex;
			padding-left: 20px;
			padding-top: 20px;
			padding-bottom: 20px;

			.zl_c_d {
				margin-top: 6px;
				margin-left: 5px;
				width: 100%;
			}

			.zl_c_e {
				padding-right: 20px;
				margin-top: 8px;
			}
		}


	}


}
</style>